<template>
  <div>
    {{sum}}
    <hr>
    {{msg}}
    <hr>
    <hr>
    <input type="text" v-model="person.fullName">
  </div>
</template>

<script>
  import {ref,reactive,watch,watchEffect} from 'vue'
  export default {
    setup(){
      let sum = ref(0)
      let msg = ref('message')
      let person = reactive({
        name:"zhangsan",
        age:18,
        job:{
          sex:"1",
          work:"zzz"
        }
      })
      // 会监视函数里面使用的变量或对象的变化，并调用函数
      watchEffect(()=>{
        const x = person.sum*10
        const y = person.msg+","
        const z = person.job.sex + person.job.work
        console.log("watchEffect",x,y,z)
      })
      return {
        person,
      }
    },
  }
</script>
